<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    width="800px" top="8vh">
    <el-container>
      <el-main style="max-height:70vh">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
          label-width="125px">

          <el-form-item label="人员名称" prop="userCode">
            <el-select :clearable="true" @change="chencUser" v-model="dataForm.userCode" filterable placeholder="请选择" class="xiaLa"
              style="width:100%;">
              <el-option v-for="(item,index) in ryOptions " :key="index" :label="item.userName" :value="item.userCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖金项名称" prop="jjxId">
            <el-select :clearable="true" @change="checkJjx" v-model="dataForm.jjxId" placeholder="请选择" class="xiaLa" style="width:100%;">
              <el-option v-for="(item,index) in jjxOptions " :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="奖惩金额" prop="jjJe">
                <el-input-number v-model="dataForm.jjJe" :precision="2" :step="100" style="width:100%;"
                  ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖惩分值" prop="jjFz">
                <el-input-number v-model="dataForm.jjFz" :precision="2" :step="1" style="width:100%"
                  ></el-input-number>
              </el-form-item>

            </el-col>
          </el-row>
          <el-form-item label="奖惩时间" prop="jjDate">
            <el-date-picker v-model="dataForm.jjDate" placeholder="奖惩时间" style="width:100%;" type="datetime"
              :picker-options="expireTimeOption" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item label="奖惩说明" prop="jjSm">
            <el-input v-model="dataForm.jjSm" placeholder="奖惩说明" :rows="3" type="textarea" style="width:100%;">
            </el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    getRyfzmxbByJjDeptId
  } from '@/api/jiangjin/jiangjinryfzmxb'
  import {
    getJjDeptJjx
  } from '@/api/jiangjin/jiangjinjjxxxb'
  export default {
    data() {
      return {
        deptId:'',
        dataIndex: '',
        visible: false,
        canSubmit: false,
        lxOptions: [{
          value: '奖励',
          label: '奖励'
        }, {
          value: '惩罚',
          label: '惩罚'
        }],
        ryOptions: [],
        jjxOptions: [],
        dataForm: {
          id: 0,
          jjDeptId: '',
          lx: '',
          userCode: '',
          userName: '',
          jjxId: '',
          jjxName: '',
          jjJe: '',
          jjFz: '',
          jjDate: '',
          jjSm: '',
          jjFfzt: '',
          jjFfid: '',
          createTime: '',
          editTime: '',
          createDeptId: '',
          createDeptName: '',
          createUserId: '',
          createUserName: '',
          editDeptId: '',
          editDeptName: '',
          editUserId: '',
          editUserName: '',
          dataState: '',
          deptId: '',
          tenantId: ''
        },
        dataRule: {
          lx: [{
            required: true,
            message: '类型不能为空',
            trigger: 'blur'
          }],
          userCode: [{
            required: true,
            message: '人员名称不能为空',
            trigger: 'blur'
          }],
          jjxId: [{
            required: true,
            message: '请选择奖金项名称',
            trigger: 'blur'
          }],
          jjJe: [{
              required: true,
              message: '奖惩金额不能为空',
              trigger: 'blur'
            }

          ],
          jjFz: [{
            required: true,
            message: '奖惩分值不能为空',
            trigger: 'blur'
          }],
          jjDate: [{
            required: true,
            message: '奖惩时间不能为空',
            trigger: 'blur'
          }],
        },
        expireTimeOption: {
          disabledDate(date) {
            //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return (
              date.getTime() < new Date(new Date().getFullYear(), 0, 1).getTime() ||
              date.getTime() > new Date(new Date().getFullYear(), 11, 31).getTime()
            );
          }
        }
      }
    },

    methods: {
      init(r, index,deptId) {
        ////console.log(r)
        this.dataIndex = index;
        this.deptId = deptId;
        this.dataForm.userCode = r.userCode;
          this.dataForm.userName = r.userName;
          this.dataForm.lx = r.lx;
          this.dataForm.jjJe = r.jjJe;
          this.dataForm.jjDate = r.jjDate;
          this.dataForm.jjSm = r.jjSm;
          this.dataForm.jjFfzt = r.jjFfzt;
          this.dataForm.jjFz = r.jjFz;
          this.dataForm.jjxId = r.jjxId === 0 ? null : r.jjxId ;
          this.dataForm.jjDeptId = r.jjDeptId;
          this.dataForm.deptId   =  r.deptId;



        this.visible = true;
        this.canSubmit = true;
        this.loadData(this.deptId);


      },
          //奖惩金额分值转换
    jeFzZh(type) {
      if (type == 'je' && this.jeFzXs != 0) {//奖惩金额值改变触发
        this.dataForm.jjFz = this.dataForm.jjJe / this.jeFzXs;
      } else if (type == 'fz' || type == 'xs') {//分值|系数改变触发
        this.dataForm.jjJe = this.dataForm.jjFz * this.jeFzXs;
      }
    },
      loadData(deptId) {
        getRyfzmxbByJjDeptId(deptId).then(res => {
          const xData = res.data.data;
          this.ryOptions = [];
          xData.map(item => {
            this.ryOptions.push({
              userCode: item.ryCode.toString(),
              userName: item.ryName
            })
          })

          let bExist = false;
          xData.find(u =>{
            if(u.ryCode === this.dataForm.userCode){
              bExist = true;
            }
          })
          if(!bExist){
            this.dataForm.userCode = null;
          }
          this.chencUser();
        })

        getJjDeptJjx(deptId).then(res => {
          const xData = res.data.data;
          this.jjxOptions = [];
          xData.map(item => {
            this.jjxOptions.push({
              value: item.id,
              label: item.jjxMc
            })
          })

          this.jjxOptions();
        })

      },
      chencUser(){
        for(var i = 0; i<this.ryOptions.length;i++){
            if(this.ryOptions[i].userCode == this.dataForm.userCode){
              this.dataForm.userName = this.ryOptions[i].userName;
            }
        }
      },
      checkJjx(){
         for(var i = 0; i<this.jjxOptions.length;i++){
            if(this.jjxOptions[i].value == this.dataForm.jjxId){
              this.dataForm.jjxName = this.jjxOptions[i].label;
            }
        }
      },
      // 表单提交
      dataFormSubmit() {
        ////console.log(this.dataForm);

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.canSubmit = false;
            this.$emit('refreshDataList', this.dataIndex, this.dataForm);
            this.dataForm= {
              id: 0,
              jjDeptId: '',
              lx: '',
              userCode: '',
              userName: '',
              jjxId: '',
              jjxName: '',
              jjJe: '',
              jjFz: '',
              jjDate: '',
              jjSm: '',
              jjFfzt: '',
              jjFfid: '',
              createTime: '',
              editTime: '',
              createDeptId: '',
              createDeptName: '',
              createUserId: '',
              createUserName: '',
              editDeptId: '',
              editDeptName: '',
              editUserId: '',
              editUserName: '',
              dataState: '',
              deptId: '',
              tenantId: ''
            }
            this.visible = false;

          }
        })
      },

    }
  }

</script>
